<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../css/mui.min.css" rel="stylesheet" />
    <link href="../../css/style.css" rel="stylesheet" />
    <style type="text/css" media="all">
      header .mui-search .mui-placeholder {
        padding-top: 6px;
      }
      header.mui-bar .mui-title {
        left: 10px;
      }
      header .mui-input-row .mui-input-clear ~ .mui-icon-clear,
      .mui-input-row .mui-input-speech ~ .mui-icon-speech {
        padding-top: 6px;
      }
      .mui-icon-search {
        display: none;
      }
      html,
      body {
        background-color: #efeff4;
      }
      .mui-bar~.mui-content .mui-fullscreen {
        top: 44px;
        height: auto;
      }
      .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
      }
      .mui-bar~.mui-pull-top-tips {
        top: 24px;
      }
      .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
      }
      .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
      }
      .mui-pull-top-tips .mui-pull-loading {
        margin: 0;
      }
      .mui-pull-top-wrapper .mui-icon,
      .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
      }
      .mui-pull-top-wrapper .mui-icon.mui-reverse {
        /*-webkit-transform: rotate(180deg) translateZ(0);*/
      }
      .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: #777;
      }
      .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
      }
      .mui-pull-top-canvas canvas {
        width: 40px;
      }
      .mui-slider-indicator.mui-segmented-control {
        background-color: #efeff4;
      }
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <a class="mui-icon mui-icon-plus mui-pull-right" v-on="tap:goTo({url:'./order-form.html',id:'order-form',noWaiting:true},{name: 'new'})"></a>
      <h1 class="mui-title mui-input-row mui-search">
				<input v-model='searchQuery' lazy type="search" class="mui-input-speech mui-input-clear" placeholder="带语音识别的搜索框">
			</h1>
    </header>
    <div class="mui-content">
      <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
          <div class="mui-scroll">
            <a class="mui-control-item mui-active" href="#draft">
							草稿
						</a>
            <a class="mui-control-item" href="#confirmed">
							已提交
						</a>
            <a class="mui-control-item" href="#done">
							完成
						</a>
          </div>
        </div>
        <div class="mui-slider-group">
          <div id="draft" class="mui-slider-item mui-control-content mui-active">
            <div id="scroll1" class="mui-scroll-wrapper">
              <div class="mui-scroll">
                <ul class="mui-table-view">
                  <li class="mui-table-view-cell" v-repeat="
									  order:list 
									  | filterBy searchQuery 
										| filterBy 'draft' in state
									  | orderBy 'createAt' -1" v-transition v-cloak>
                    <partial name="my-partial"></partial>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div id="confirmed" class="mui-slider-item mui-control-content">
            <div class="mui-scroll-wrapper">
              <div class="mui-scroll">
                <ul class="mui-table-view">

                  <li class="mui-table-view-cell" v-repeat="
										order:list 
										| filterBy searchQuery 
										| filterBy 'confirmed' in state
										| orderBy 'createAt' -1" v-transition v-cloak>
                    <partial name="my-partial"></partial>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div id="done" class="mui-slider-item mui-control-content">
            <div class="mui-scroll-wrapper">
              <div class="mui-scroll">
                <ul class="mui-table-view">

                  <li class="mui-table-view-cell" v-repeat="
										order:list 
										| filterBy searchQuery 
										| filterBy 'done' in state
										| orderBy 'createAt' -1" v-transition v-cloak>
                    <partial name="my-partial"></partial>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/x-template" id="item-template">
      <div class="mui-slider-handle">
        <div class="mui-table" v-on="tap:goTo({url:'./order-form.html',id:'order-form',noWaiting:true},order)">
          <div class="mui-table-cell mui-col-xs-5">
            <h4 class="mui-ellipsis">{{order.name}}</h4>
            <h5>客户：{{order.customer.text}}</h5>
          </div>
          <div class="mui-table-cell mui-col-xs-4">
            <h4>&nbsp;</h4>
            <h5>状态：{{order.state}}</h5>
          </div>
          <div class="mui-table-cell mui-col-xs-3 mui-text-right">
            <span class="mui-h5">{{order.createAt| dataFormat 'MM-dd hh:mm'}}</span>
          </div>
        </div>
      </div>
      <div class="mui-slider-left mui-disabled">
        <a class="mui-btn mui-btn-grey mui-icon mui-icon-person"></a>
        <a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone" href="tel:10086"></a>
        <a class="mui-btn mui-btn-red mui-icon mui-icon-email"></a>
      </div>
      <div class="mui-slider-right mui-disabled">
        <a v-on="tap:deleteItem(null,order)" class="mui-btn mui-btn-red mui-icon mui-icon-trash"></a>
      </div>
    </script>
    <script src="../../js/mui.js"></script>
    <script src="../../js/lodash.min.js"></script>
    <script src="../../js/mui.pullToRefresh.js"></script>
    <script src="../../js/mui.pullToRefresh.material.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../app/filters/data-format.js"></script>
    <script src="../../app/vue-html5.js"></script>
    <script src="../../app/vue-mixin-listPage.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
      var time0 = Date.now();
      (function($, window, document, Vue, vm) {
        Vue.partial('my-partial', document.getElementById('item-template'));
        window.vm = vm = new Vue.PageVm({
          el: 'body',
          name: 'page order',
          autoCloseWaiting: false,
          model: 'SaleOrders',
          plusReady: function() {
            Vue.preload({
              timeout: 500
            }, {
              url: './order-form.html',
              id: 'order-form',
            });
            plus.runtime.setBadgeNumber(this.list.length);
          },
          mixins: [Vue.mixins.ajax, Vue.mixins.list]
        });
      })(mui, window, document, Vue, window.vm = {});
    </script>
  </body>

</html>